<template>
  <div>
    <!-- 搜索历史标题 -->
    <van-cell title="搜索历史">
      <van-icon @click="isDel=true" v-if="!isDel" name="delete-o" />
      <template v-else>
        <span @click="history.splice(0)">全部删除</span>
        <span style="margin-left:10px" @click="isDel=false">完成</span>
      </template>
    </van-cell>
    <!-- 搜索历史内容 -->
    <van-cell @click="delHistory(index,item)" v-for="(item,index) in history" :key="item" :title="item">
      <van-icon v-if="isDel" name="close" />
    </van-cell>

    <!-- 暂无搜索历史 -->
    <van-empty v-if="!history.length" image="error" description="暂无搜索历史" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isDel: false
    }
  },
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 删除操作
    delHistory (index, item) {
      if (this.isDel) {
        // 处于删除状态
        this.history.splice(index, 1)
      } else {
        // 点击进行搜索
        this.$emit('delHistory', item)
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
